<template>
   <div class="cart">     
     <el-table
       :data="tableData"
       border
       style="width: 100%"
     >
       <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
       <el-table-column prop="name" label="书名" align="center"></el-table-column>
       <el-table-column prop="price" label="价格" width="100" align="center"></el-table-column>
       <el-table-column label="数量" align="center">
         <template slot-scope="scope">
           <el-input-number v-model="scope.row.number" :min="1" :max="scope.row.pnum" label="描述文字" @change="change(scope.row.number,scope.$index)"></el-input-number>
         </template>
       </el-table-column>
       <el-table-column label="小计" width="150" align="center">
         <template slot-scope="scope">
           {{tableData[scope.$index].lineTotal}} 
         </template>
       </el-table-column>
       <el-table-column label="操作"  width="180" align="center">
         <template slot-scope="scope">
           <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>     
     <div class="total_warpper">
       <h3>共计：{{$store.getters.totalPrice}}</h3>
       <h3>总数：{{$store.getters.totalNumber}}</h3>
     </div>
     <div class="group_btn">
       <el-button type="success" @click="commitOrder()">提交订单</el-button>
     </div>
     
   </div>
 </template>
 
 <script>
 export default {
   methods: {
       change(val,index){
           this.$store.commit("refresh",index);
       },
    commitOrder(){
      if(
                this.$cookies.get('status') == 'unlogin'   ||
                !this.$cookies.get('status')){//没有登录，跳转到登录界面，已经登录跳转到确认订单界面
                  this.$router.push('/login');
          }
            this.$router.push('/order');
    },    
     handleDelete(index) {//删除表格的数据
       this.$store.dispatch('delBook',index);
     },
   },          
 };
 </script>
 
 <style scoped>
 .cart {
   margin: 50px auto;
   width: 1000px;
 }
 .group_btn {
   margin-bottom: 30px;
 }
 .addDialog .el-input {
   width: 90%;
 }
 .total_warpper {
   text-align: right;
   margin-top: 30px;
 }
 h3 {
   margin-top: 10px;
 }
 </style> 